<script>
import {provide} from "vue";
import {useVModel} from "@vueuse/core";
export default {
  name:'XtxTabs',
  props:{
    modelValue:{
      type:String,
      default:''
    }
  },
  emits:['tab-click'],
  setup(props, {emit, slots}) {
    const activeName = useVModel(props, 'modelValue', emit)
  //   给tabs-panel传值
    provide('activeName', activeName)

    const tabClick = (name, index) => {
      activeName.value = name
      emit('tab-click', {name, index})
    }

    const panels = slots.default()
    panels.forEach(item=>{
      if(item.type.name === 'XtxTabsPanel') {
        dynamicPanels.push(item)
      }else {
        item.children.forEach(com=>{
          dynamicPanels.push(com)
        })
      }
    })
    const dynamicPanels = []

    return {
      activeName,
      panels,
      dynamicPanels,
      tabClick
    }
  },
}
</script>

<template>
<div class="xtx-tabs">
  <nav>
    <a
        v-for="(item, index) in dynamicPanels"
        :key="index"
        @click="tabClick(item.props.name, index)"
        href="javascript:"
        :class="{active:item.props.name === activeName}"
    >
      {{item.props.label}}
    </a>
  </nav>
</div>
</template>

<style scoped lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>